前一篇有提到渲染，這篇會介紹渲染與畫面更新的知識

什麼是渲染(render)?

在知道畫面怎麼更新前，先來說明一下什麼是渲染，我們看到渲染很直覺會想到瀏覽器的渲染，但是在React的渲染(Render)可不是瀏覽器的渲染，在React文件指的渲染(Render)只是在呼叫我們寫的function component的階段而已，真正的瀏覽器渲染(Render-tree → Layout → Paint)會以繪製(painting)來表示。

更新畫面步驟

1. 觸發渲染(Triggering a render)

2. 渲染(Rendering component**)**

   React會呼叫component(如果component有子層component也會跟著一起渲染，一層一層往下傳遞)並且理解運送出那些東西要呈現在畫面上。

3. 送交到DOM(Committing to the DOM)

   實際將繪製畫面

官方文件用了有趣的比喻來說明更新畫面的步驟，假設在一家餐廳，React扮演服務生的腳色

1. **Triggering：**將客人(User)的菜單送到廚房
2. **Rendering：**在廚房準備餐點
3. **Committing：**將餐點送至客人(User)桌上

更新畫面的2種流程

• 初始載入的時候會觸發初次的渲染

  1. 使用React所提供的render作為初次的渲染

     import Image from './Image.js';
     import { createRoot } from 'react-dom/client';
     
     const root = createRoot(document.getElementById('root'))
     root.render(<Image />);
     

  2. React會呼叫root component

     如果是初次的渲染在這個過程中，會建立html的tag

  3. 繪製到畫面上

     會使用[appendChild()](https://developer.mozilla.org/docs/Web/API/Node/appendChild)將步驟2建立的html tag繪製到畫面上。

• 有狀態更新的時候會重新觸發渲染

  1. 觸發useState的setter function會再次觸發渲染
  2. 會再次渲染狀態更新的component，並且透過上次渲染產生的結果(Virtual DOM)跟這次更新的做比較，計算有那些內容需要更新，提供第3階段使用
  3. 更新需要變更的畫面

這邊要注意的是，即使component有渲染，畫面也不一定會更新，他只會更新有變更的部分，來提優化效能。

參考

https://react.dev/learn/render-and-commit